import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, message } from 'antd'
import echarts from 'echarts'
import _ from 'lodash'
import cn from 'classnames'
import { mapColor, isEqual } from 'lib/fun'
import Ajax from 'lib/Ajax'

class ModuleName extends Component {
    constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
    this.option = {
        color: props.color,
        toolbox: {
          feature: {
              dataView: {
                show: true, 
                readOnly: true,
                optionToContent: function(opt) {
                  // var axisData = opt.xAxis[0].data;
                  var series = opt.series;

                  var table = `<div class="ant-table ant-table-middle ant-table-fixed-header ant-table-scroll-position-left">
                              <div class="ant-table-content">
                                <div class="ant-table-scroll">
                                  <span>
                                    <div class="ant-table-header">
                                      <table class="">
                                        <colgroup>
                                          <col style="width: 150px; min-width: 150px;">
                                          <col style="width: 150px; min-width: 150px;">
                                        </colgroup>
                                        <thead class="ant-table-thead">
                                          <tr>
                                            <th class=""><span>${props.headTitle||""}</span></th>
                                            <th class=""><span>${series[0].name}</span></th>
                                          </tr>
                                        </thead>
                                      </table>
                                    </div>
                                    <div class="ant-table-body" style="max-height: 182px; overflow-y: scroll;">
                                      <table class="">
                                        <colgroup>
                                          <col style="width: 150px; min-width: 150px;">
                                          <col style="width: 150px; min-width: 150px;">
                                        </colgroup>
                                        <tbody class="ant-table-tbody">`;
              for (var i = 0, l = series[0].data.length; i < l; i++) {
                  table += `<tr class="ant-table-row  ant-table-row-level-0">
                              <td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;">${series[0].data[i].name}</span></td>
                              <td class=""><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;">${series[0].data[i].value}</span></td>
                            </tr>`;
              }

              table += `</tbody>
                        </table>
                      </div>
                    </span>
                  </div>
                </div>
              </div>`;

                  return table;
              }
            },
            right: 20
          }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          data:[],
          left: 0,
          orient: 'vertical'
        },
        series : [
            {
                name: '',
                type: 'pie',
                radius: ['30%', '70%'],
                center: ['50%', '50%'],
                data:[],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
  }

  componentDidMount(){
    this.chart = echarts.init(document.getElementsByClassName(this.props.setClass)[0]);
    this.chart.setOption(this.option);
  
    window.addEventListener('resize', this.handleResize); 

    this.loadData()
  }

  handleResize = (e)=>{
    this.chart.resize();
  }
  
  componentWillUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }

  componentWillReceiveProps(nextProps){
    if(!_.isEqual(nextProps.search, this.props.search)&&!isEqual(nextProps.search, this.props.search)){
      this.loadData(nextProps.search);
    }
  }

  loadData = (search) => {
    var self = this;
    var s = search?search:this.props.search;
    if(s.areaIds&&s.areaIds != undefined&&s.areaIds.length > 0){
      self.setState({
        loading: true
      });
      Ajax({
        url: self.props.url,
        data: s,
        success: function(data){
          // console.log(data);
          if(data&&data.length > 0){
            var obj = data[0].pointList;
            self.option.series[0].name = data[0].name;
            self.option.legend.data = _.map(obj, (item)=>{
              return item.x
            });
            self.option.series[0].data = _.map(obj, (item)=>{
              return {
                value: item.y, 
                name: item.x
              }
            });
            self.chart.setOption(self.option);
          }
          self.setState({
            loading: false
          });
        },
        error: function(error){
          message.error(error);
          self.setState({
            loading: false
          });
        }
      });
    }
  }

  fun = () => {
    
  }
  
  render() {

    return (
      <Spin spinning={this.state.loading}>
          <div className={ cn('user-select', this.props.setClass) } style={{height: 300}}></div>
      </Spin>
    )
  }
}

module.exports = ModuleName
